<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社会主义核心价值观</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc);
            background-size: 600% 600%;
            animation: gradient 15s ease infinite;
            z-index: -1;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .core-values {
            position: fixed;
            display: none;
            font-size: 2rem;
            z-index: 9999;
            pointer-events: none;
            color: transparent;
            background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
            -webkit-background-clip: text;
            background-clip: text;
            transition: opacity 0.5s ease;
        }

        .star {
            position: absolute;
            display: none;
            width: 20px;
            height: 20px;
            background-color: red;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            z-index: 9999;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="background"></div>
    <div class="core-values" id="coreValues">
        富强 · 民主 · 文明 · 和谐 · 自由 · 平等 · 公正 · 法治 · 爱国 · 敬业 · 诚信 · 友善
    </div>
    <div class="star" id="star"></div>

    <script>
        const coreValuesElement = document.getElementById('coreValues');
        const starElement = document.getElementById('star');
        const coreValues = coreValuesElement.textContent.trim().split(' · ');
        let index = 0;

        document.addEventListener('click', (event) => {
            const x = event.clientX;
            const y = event.clientY;

            coreValuesElement.textContent = coreValues[index];

            coreValuesElement.style.left = `${x}px`;
            coreValuesElement.style.top = `${y}px`;

            coreValuesElement.style.display = 'block';
            coreValuesElement.style.opacity = '1';

            starElement.style.left = `${x}px`;
            starElement.style.top = `${y}px`;

            starElement.style.display = 'block';
            starElement.style.opacity = '1';

            index = (index + 1) % coreValues.length;

            setTimeout(() => {
                coreValuesElement.style.opacity = '0';
                starElement.style.opacity = '0';
                setTimeout(() => {
                    coreValuesElement.style.display = 'none';
                    starElement.style.display = 'none';
                }, 500);
            }, 1000);
        });
    </script>
</body>
</html>
